<template>
    <layout>
    <div class="heart-container">
        <Banner></Banner>
        <Item></Item>
        <!-- 热播节目 -->
        <Section :tit="t1" :icon="i1" more="">
            <template #main>
                <playList :fmList="fmListHot"></playList>
            </template>
            <template #footer>
                <van-button color="#7e868f" plain icon="replay" size="small" @click="changeFM">换一换</van-button>
            </template>
        </Section>
        <!-- 推荐播单 -->
        <Section :tit="t2" :icon="i2">
            <template #main>
                <playSwipe :fmList="fmListRec"></playSwipe>
            </template>
        </Section>
        <!-- 最新精选 -->
        <Section :tit="t3" :icon="i3">
            <template #main>
                <playList :fmList="fmListNew"></playList>
            </template>
        </Section>
    </div>
    </layout>
</template>

<script setup lang='ts'>
import Banner from './Banner.vue'
import Item from './Item.vue'
import Section from '../../components/section.vue'
import playList from '../../components/playList.vue';
import playSwipe from '../../components/playSwipe.vue';
import layout from '../../components/layout.vue';

import {ref,onMounted} from 'vue'
import ajax from '../../apis/Ajax';

const fmListNew:any = ref([])
const fmListHot:any = ref([])
const fmListRec:any = ref([])


const t1:any = ref('热播节目')
const t2:any = ref('推荐播单')
const t3:any = ref('最新精选')
const i1:any = ref('fire-o')
const i2:any = ref('thumb-circle-o')
const i3:any = ref('music-o')

onMounted(() => {
    ajax({
        url:'/fmList'
    }).then(({data}:any)=>{
        // console.log(data.rows)
        fmListNew.value = data.rows
    })

    // sth to do:这截代码写了两遍 要记得复用
    ajax({
        url:'/hotList'
    }).then(({data})=>{
        // console.log(data.rows)
        fmListHot.value = data.rows
    })

    ajax({
        url:'/recList'
    }).then(({data})=>{
        // console.log(data)
        fmListRec.value = data.rows
        // 并将数据存起来
        localStorage.setItem('recList',JSON.stringify(data.rows))
    })
})

function changeFM(){
    ajax({
        url:'/hotList'
    }).then(({data})=>{
        // console.log(data.rows)
        fmListHot.value = data.rows
    })
}

</script>

<style lang="less">
.heart-container {
    height: 2000px;
    footer {
        // sth to do 此处样式要调整！
        padding: 0 15rem;
    }
    .van-button {
        margin: 10px auto;
        
    }
}
</style>